<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片点击效果</title>
    <style>
        .picture_htmlcssimg img {
            width: 800px;
        }
    </style>
</head>

<body>
    <!--一个简单的js函数实现点击图片切换到另一张，再次点击恢复原图-->
    <div class="picturebox_html">
        <div id="button01">
            <div class="picture_htmlcssimg">
                <img id="picts01" src="./images/picture_html.png" alt="">
            </div>
        </div>
        <script>

            function change_pic() {
                var button01 = document.getElementById("button01");

                var picts01 = document.getElementById("picts01");

                button01.onclick = function () {
                    if (picts01.getAttribute("src", 2) == "./images/picture_html.png") {

                        picts01.setAttribute("src", "./images/picture_html01.png");

                    } else {

                        picts01.setAttribute("src", "./images/picture_html.png");

                    };
                }
            }
            change_pic();

        </script>
    </div>

</body>

</html>